<template>
  <div class="container">
    <ul class="infinite-list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
        style="overflow:visible">
      <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      loading: false
    }
  },
  computed: {
    noMore() {
      return this.count >= 20
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  methods: {
    load() {
      console.log('123', 123)
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 200px;
  overflow: hidden;
  overflow-y: scroll;
}

ul {
  display: block;

  li {
    height: 30px;
    background: #6DC1FF;
    color: #fff;
    margin-bottom: 2px;
  }
}

</style>